/*
  学习目标：深入props-children属性
  特指: 标签夹着的内容区域, 类似vue中的插槽
  特点: children可以传任意数据类型, 如💥函数 JSX

*/
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        {/* <Child>123</Child> */}
        {/* <Child>{123}</Child> */}
        {/* <Child>{[1, 2, 3]}</Child>
        <Child>{{ name: 'zs', age: 18 }}</Child> */}

        {/* <Child>
          {() => {
            alert(123);
          }}
        </Child> */}
        {/* <Child>
          {() => {
            return <h1>我是函数的返回结果</h1>;
          }}
        </Child> */}
        <Child>
          <i>我是斜着的标签</i>
        </Child>
      </div>
    );
  }
}

function Child({ children }) {
  console.log(' children ----->  ', children);
  return <div>{children}</div>;
}
